<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="drafVisible"
      width="60%"
      :before-close="handleClose"
    >
      <el-form
        :model="form"
        ref="ruleForm"
        label-width="130px"
        class="demo-ruleForm"
      >
        <div style="width: 100%; display: flex">
          <div style="width: 50%">
            <el-form-item label="项目名称" prop="projectName">
              <el-input
                v-model="form.projectName"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </div>
          <div style="width: 50%">
            <el-form-item label="项目负责人" prop="projectPerson">
              <el-input
                v-model="form.projectPerson"
                style="width: 80%"
                :disabled="true"
              ></el-input>
            </el-form-item>
          </div>
        </div>
        <div style="width: 100%; display: flex">
          <div style="width: 50%">
            <el-form-item label="项目开始时间" prop="startTime">
              <el-date-picker
                v-model="form.startTime"
                style="width: 80%"
                placeholder="选择日期时间"
                type="date"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                size="small"
                :picker-options="pickerOptions"
              >
              </el-date-picker>
            </el-form-item>
          </div>
          <div style="width: 50%">
            <el-form-item label="项目结束时间" prop="endTime">
              <el-date-picker
                v-model="form.endTime"
                style="width: 80%"
                placeholder="选择日期时间"
                type="date"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                size="small"
                :picker-options="pickerOptions"
              >
              </el-date-picker>
            </el-form-item>
          </div>
        </div>
        <div style="width: 100%; display: flex">
          <div style="width: 50%">
            <el-form-item label="项目金额" prop="price">
              <el-input v-model="form.price" style="width: 80%"></el-input>
            </el-form-item>
          </div>
          <div style="width: 50%">
            <el-form-item label="项目文件">
              <el-upload
                class="upload-demo"
                :action="action"
                :data="{
                  projectCode: form.projectCode,
                }"
                :limit="1"
                :file-list="fileList"
                :on-success="onsuccess"
                :on-preview="preview"
              >
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>
          </div>
        </div>
        <div style="width: 100%; display: flex">
          <div style="width: 50%">
            <el-form-item label="项目成员">
              <el-checkbox-group v-model="checkList" @change="checkChange">
                <el-checkbox
                  :label="item.id"
                  v-for="(item, index) in userData"
                  :key="index"
                  >{{ item.name }}</el-checkbox
                >
              </el-checkbox-group>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="drafVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit('ruleForm')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { url } from "../../../utils/url";
export default {
  props: ["drafVisible", "title", "list"],
  data() {
    var startTime = (rule, value, callback) => {
      if (value == undefined || value == "") {
        callback("请选择时间");
      } else {
        callback();
      }
    };
    return {
      form: {
        projectName: "",
        projectPerson: "",
        startTime: "",
        endTime: "",
        price: "",
        member: "",
        projectURL: "",
      },
      rules: {
        projectName: [
          { required: true, message: "请输入项目名称", trigger: "blur" },
        ],
        startTime: [{ required: true, trigger: "blur", validator: startTime }],
        endTime: [{ required: true, trigger: "blur", validator: startTime }],
        price: [{ required: true, message: "请输入项目金额", trigger: "blur" }],
      },
      fileList: [],
      checkList: [],
      userData: [],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        },
      },
      action: url + "postProjectURL",
    };
  },
  watch: {
    drafVisible(newV) {
      //form.person自动
      this.form.projectPerson = this.$store.state.user.info.name;
      //成员
      this.getUser();
    },
  },
  methods: {
    handleClose() {
      //emits刷新关掉
      this.$emit("drafClose", true);
    },
    onsuccess(response, file, fileList) {
      if (file) {
        this.form.projectURL = response.data.url;
      }
    },
    //下载预览
    preview(file) {
      let a = document.createElement("a");
      a.href = file.url;
      a.download = file.name.slice(0, file.name.lastIndexOf("."));
      document.body.append(a);
      a.style.display = "none";
      a.click();
    },
    checkChange(e) {
      console.log(e,'eeee')
      let str = "";
      e.forEach((ele, index) => {
        str += ele + "/";
      });
      str = str.slice(0, str.length - 1);
      this.form.member = str;
    },
    //获取用户信息
    getUser() {
      this.checkList = [];
      this.$http.get("/allUser").then((res) => {
        if (res.code == 200) {
          this.userData = res.data;
          if (this.title == "草稿-添加") {
            this.checkList.push(this.$store.state.user.info.id);
            this.form.member=this.$store.state.user.info.id
            return;
          }
          this.checkList=this.list
        }
      });
    },
    //确定
    submit() {
      //草稿不需要校验
      if (this.title == "草稿-添加") {
        console.log(this.form, "form");
        this.$http.post("/postDrafProject", this.form).then((res) => {
          if (res.code == 200) {
            this.$message.success("新增成功");
            this.$nextTick(() => {
              this.handleClose();
            });
          } else {
            this.$message.error(res.msg);
          }
        });
        return;
      }
      //编辑
      this.$http.post("/editDrafList", this.form).then((res) => {
        if (res.code == 200) {
          this.$message.success("修改成功");
          this.handleClose();
        } else {
          this.$message.error(res.msg);
        }
      });
    },
  },
};
</script>

<style>
</style>